<template>
  <div>
    <ElButton @click="openIinsert()" type="success">添加</ElButton>
    <ElCard style="width: 80%;"> <ElTable :data="results">
      <ElTableColumn label="编号" prop="code"></ElTableColumn>
      <ElTableColumn label="名称" prop="name"></ElTableColumn>
      <ElTableColumn label="操作区">
        <template #default="{ row }">
          <ElButton @click="remove(row.code)" type="danger" size="small">删除</ElButton>
        </template>
      </ElTableColumn>
    </ElTable></ElCard>
   
    <ElDialog v-model="visible">
      <ElForm>
        <ElFormItem>
          <ElInput v-model="insertCondition.name" style="width: 300px;"></ElInput>
        </ElFormItem>
        <ElFormItem>
         <ElButton @click="add" type="primary">确定</ElButton>
        </ElFormItem>
      </ElForm>
    </ElDialog>
  </div>
</template>
<script lang="ts">
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from

export default {
  name: 'CityView',
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: 'value',
      results: [],
      visible: false,
      insertCondition: {
        code: '',
        name: ''
      }
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {
    this.getTalbe()
  },
  methods: {
    // sampleM() {},
    async getTalbe() {
      await axios({
        method: 'GET',
        url: 'http://127.0.0.1:7003/city/query'
      }).then(
        (res) => {
          console.log(res.data)
          this.results = res.data
        },
        (error) => {
          console.log(error.response.data)
        }
      )
    },
    async remove(code: string) {
      await axios({
        method: 'DELETE',
        url: 'http://127.0.0.1:7003/city/remove/' + code
      }).then(
        (res) => {
          console.log(res.data)
          ElMessage.success('删除成功')
          this.getTalbe()
        },
        (error) => {
          console.log(error.response.data)
        }
      )
    },
    openIinsert() {
      this.visible = true
      this.insertCondition={
        code: '',
        name: ''
      }
    },
    async add(){
      await   axios({
              method: "POST",
              url: "http://127.0.0.1:7003/city/insert",
              data: this.insertCondition,
            }).then(
              (res) => {
                ElMessage.success('添加成功')
                this.getTalbe()
                this.visible=false
                console.log(res.data);
              },
              (error) => {
                ElMessage.warning(error.response.data)
                console.log(error.response.data);
              }
            );
    }
  },
  watch: {
    // sampleP(n, o) {},
  }
}
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
